<template>
	
	<!-- 父容器 -->
	<div class="container-full" id="container-full">

		<!-- 顶部 -->
		<div class="head">

			<div id="title">
				<h2>{{title}}</h2>
			</div>

			<!-- 搜索框 -->
			<div class="search">
				<input type="text" style="outline: 7px;height: 35px;padding: 10px;" placeholder="HTML 教程" size="30">
			</div>
		</div>

		<!-- 容器 -->
		<div class="container">

			<!-- 顶部导航栏 -->
			<div class="topnav">
				<ul>
					<li v-for="item in items">
						<a href="#">{{item}}</a>
					</li>

				</ul>
			</div>

			<!-- 容器2-->
			<div class="container_2">

				<!-- 左侧栏 -->
				<div class="sidebar-left">

					<div class="title-bar">
						{{leftTitle}}
					</div>

					<div id="left-list">
						<ul>
							<li v-for="item1 in items1">
								{{item1}}
							</li>
							<li></li>
						</ul>
					</div>
				</div>

				<div class="main">

					<!-- 学号 姓名 -->
					<div class="row" style="width: 100%;background-color: rgb(243, 243, 243);">

						<div class="col-md-12" style="height: 80px;padding-left: 30px;">
							<div class="row">
								<div class="col-md-2"
									style="position: relative;top: 5px;font-size: 1.8em;font-weight: 600;color: #00007f">
									{{uid}}
								</div>
							</div>
							<div class="row">
								<div class="col-md-4"
									style="position: relative;top: 3px;font-size: 2em;font-weight: 600;color: #00007f">
									{{name}}
								</div>
							</div>
						</div>

					</div>

					<hr>

					<!-- 模块1 ifram窗口 -->
					<div class="page_1">
						<iframe src="https://www.runoob.com/" loading="lazy" frameborder="0" width="100%"
							height="100%"></iframe>
					</div>

					<hr>

					<!-- 模块2 -->
					<div class="page_2">
						<div class="card-1">
							<p>Iframe语法：</p>
							<div class="code">
								<!-- 显示代码语句 -->
								<xmp><iframe src="URL"></iframe></xmp>
							</div>
							<p style="margin-top: 7px;">该URL指向不同的网页。</p>
						</div>

						<hr>

						<div class="card-2">
							<ul>
								<li>
									<h3>iframe - 设置高度与宽度</h3>
								</li>
								<li>
									<p>height 和 width 属性用来定义iframe标签的高度与宽度。</p>
								</li>
								<li>
									<p>属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。</p>
								</li>
							</ul>



						</div>
					</div>

				</div>
				<div class="sidebar-right">
					<div class="classify">
						分类导航
					</div>

					<div>
						<ul>
							<li v-for="item2 in items2">
								{{item2}}
							</li>

						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="foot">
			@runoob.com
		</div>
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		props: {
			msg: String
		},
		methods: {


		},
		data() {
			return {

				title: 'Runoob.COM',
				items: [
					'HTML',
					'JAVASCRIPT',
					'VUE',
					'BOOTSTRAP',
					'NODE.JS',
					'PYTHON',
					'C',
					'C++',
					'C#',
					'SQL',
					'LINUX',
					'jquery'
				],
				leftTitle: 'HTML 教程',
				items1: [
					'HTML 教程',
					'HTML 简介',
					'HTML 基础',
					'HTML 元素',
					'HTML 属性',
					'HTML 标题',
					'HTML 段落',
					'HTML 文本',
					'HTML 链接',
					'HTML 头部',
					'HTML CSS',
					'HTML 图像',
					
				],
				uid: 55,
				name: '叶富城',
				items2: [
					'HTML/CSS',
					'JavaScript',
					'服务端',
					'数据库',
					'数据分析',
					'移动端',
					'XML 教程',
					'A.SP.NET',
					'Web Service',
					'开发工具',
					'网站搭建'
				]




			}
		}
	}
</script>

<style>
	body {
		background: rgb(241, 235, 235);
	}

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;

	}

	hr {
		background-color: rgb(117, 117, 117);
		height: 1px;
		border: none;
		margin: 5px 0;
		box-shadow: 10px;
	}

	.head {
		background: #ffc143;
		display: flex;
		align-items: center;

	}

	.head h2 {
		font-weight: 600;
		color: #fff;
		padding: 10px 100px;
	}

	.head .search {
		position: relative;
		left: 50%;
	}

	.topnav {
		background: #dcdc00;

	}

	.topnav ul {
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		/*属性规定弹性项目是否应换行*/
		justify-content: center;
	}

	.topnav ul li {
		margin: 10px 20px;
		font-weight: 550;
		font-size: 1.1em;

	}

	.topnav ul li a {
		text-decoration: none;
		color: #fff;
		letter-spacing: 2px;
		/*字体间的间距*/
	}

	.topnav ul li a:hover {
		color: rgb(112, 153, 240);
	}
	
	.container{
		margin: 0 auto;
	}

	.container_2 {
		display: flex;
		width: 100%;
		margin: 0 0 10px 0;
	}

	.sidebar-left {
		width: 15%;
		height: 850px;
		background: #f3f3f3;
		overflow: hidden;

	}

	.sidebar-left:hover {
		overflow-y: overlay;
	}

	.sidebar-left .title-bar {
		background-color: #e9d8c9;
		font-size: 1.5em;
		font-weight: 600;
		color: rgb(119, 119, 119);
		padding: 7px;
		border-top-left-radius: 10px;
		box-shadow: 10px;
		border: 1px solid #ccc;
	}

	.sidebar-left ul {
		list-style: none;
		padding: 5px;
	}

	.sidebar-left ul li {
		font-size: 15px;
		font-weight: 600;
		color: rgb(99, 99, 99);
		padding: 7px;
		background-color: #f1ede3;
		border-bottom: 1px solid rgb(230, 230, 230);
	}


	.main {
		border: 1px solid #ccc;
		box-shadow: 10px;
		width: 70%;
		overflow: hidden;
		margin-left: 20px;
		margin-right: 20px;


	}

	.main:hover {
		overflow: overlay;
	}

	.sidebar-right {
		width: 15%;
		height: 460px;

		background-color: #F3F3F3;

	}

	.sidebar-right .classify {
		display: flex;
		justify-content: center;
		background-color: #e9d8c9;
		font-size: 1.5em;
		font-weight: 600;
		color: rgb(119, 119, 119);
		padding: 7px;
		border-top-right-radius: 10px;
		box-shadow: 10px;
		border: 1px solid #ccc;
	}

	.sidebar-right ul {
		list-style: none;
		padding: 5px;
	}

	.sidebar-right ul li {
		font-size: 15px;
		padding: 7px;
		background-color: #f1ede3;
		border-bottom: 1px solid rgb(230, 230, 230);
	}

	.foot {
		position: relative;
		top: 20px;
		background: #A9AABC;

		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.page_1 {
		width: 98%;
		height: 70%;
		margin: 10px 0;
		background-color: #A9AABC;

	}



	.page_2 {
		width: 98%;
		height: 70%;
		margin: 10px 0;
		background-color: #ffffff;
	}

	.page_2 .card-1 {
		padding: 10px;
	}

	.page_2 .card-1 .code {
		border: 1px solid;
		background-color: rgb(233, 233, 233);
	}




	/*超大屏幕 大桌面显示器  .col-xl-：*/
	@media screen and (min-width: 1400px) {
		.container {
			width: 1400px;
		}
	}

	@media screen and (max-width: 750px) {
		.head {
			display: flex;
			justify-content: center;
		}

		.head h2 {
			font-size: 1.5em;
		}


		.top ul li {
			font-size: 0.5em;

		}

	}
</style>
